<template>
  <div class="condition_list">
    <div class="query">
      <div class="time1">
        <span>日期</span>
        <el-date-picker v-model="value1" style="width:120px" type="date" placeholder="选择日期">
        </el-date-picker>
        <el-time-select v-model="values1" style="width:65px" :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '23:00'
        }" placeholder="选择时间">
        </el-time-select>
      </div>
      <div class="time2">
        <el-checkbox v-model="checked1"></el-checkbox>
        <span>至</span>
        <el-date-picker v-model="value2" style="width:120px" type="date" placeholder="选择日期">
        </el-date-picker>
        <el-time-select v-model="values2" style="width:65px" :picker-options="{
          start: '00:00',
          step: '01:00',
          end: '23:00'
        }" placeholder="选择时间">
        </el-time-select>
      </div>
      <div class="station">
        <span>测站</span>
        <el-select v-model="value" style="width:200px" placeholder="请选择">
          <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="type">
        <span>类型</span>
        <el-select v-model="value" style="width:200px" placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="number">
        <span>阈值</span>
        <el-input v-model="input1" style="width:200px" placeholder="请输入内容"></el-input>
      </div>
      <div class="check">
        <div class="check1">
          <el-checkbox v-model="checked2"></el-checkbox>
          <span>列表</span>
        </div>
        <div class="check2">
          <el-checkbox v-model="checked3"></el-checkbox>
          <span>列表</span>
        </div>
        <div class="check3">
          <el-checkbox v-model="checked4"></el-checkbox>
          <span>列表</span>
        </div>
        <div class="check4">
          <el-checkbox v-model="checked5"></el-checkbox>
          <span>列表</span>
        </div>
      </div>
      <div class="buttons">
        <el-button>按时间查询雨量</el-button>
        <el-button>1时累计雨量</el-button>
        <el-button>3时累计雨量</el-button>
        <el-button>1天累计雨量</el-button>
        <el-button>3天累计雨量</el-button>
        <el-button>7天累计雨量</el-button>
        <el-button>雷达图</el-button>
        <el-button>云图</el-button>
        <el-button>数据订正</el-button>
        <el-button>清除数据</el-button>
        <el-button>图表统计</el-button>
      </div>
    </div>
    <div class="btn">
      <el-button>添加预报</el-button>
      <el-button>删除预报</el-button>
      <el-button>图形输出</el-button>
    </div>
    <div class="tab">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="自动分级" name="first">
          <div class="check">
            <el-checkbox v-model="checked6"></el-checkbox>
            <span>自动分级</span>
          </div>
          <div class="grade">
            <span>分级数</span>
            <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="1"
              :max="10"></el-input-number>
          </div>
          <div class="color">
            <span>基准色</span>
            <div class="color_box"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="条件设置" name="second">
          <div class="number">
            <span>张力系数</span>
            <el-input v-model="input2" style="width:160px" placeholder="请输入内容"></el-input>
          </div>
          <div class="point">
            <span>插入点数</span>
            <el-input v-model="input3" style="width:160px" placeholder="请输入内容"></el-input>
          </div>
          <el-button>分级设置</el-button>
          <div class="checks">
            <div class="check1">
              <el-checkbox v-model="checked7"></el-checkbox>
              <span>面显示</span>
            </div>
            <div class="check2">
              <el-checkbox v-model="checked8"></el-checkbox>
              <span>线显示</span>
            </div>
            <div class="check3">
              <el-checkbox v-model="checked9"></el-checkbox>
              <span>标记显示</span>
            </div>
            <div class="check4">
              <el-checkbox v-model="checked10"></el-checkbox>
              <span>透明</span>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="button">
      <div class="one">
        <el-button>等值图</el-button>
        <el-button>添加图例</el-button>
        <el-button>删除图例</el-button>
        <el-button>图形输出</el-button>
      </div>
      <div class="two">
        <div class="num">
          <span>文档期号:</span>
          <el-input v-model="input4" style="width:150px" placeholder="请输入内容"></el-input>
        </div>
        <el-button>修改</el-button>
      </div>
      <div class="three">
        <el-button>产品文档</el-button>
        <el-button>模板编辑</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      num: 7,
      color1: 'red',
      value1: "",
      value2: "",
      values1: "",
      values2: "",
      checked1: true,
      checked2: true,
      checked3: true,
      checked4: true,
      checked5: false,
      checked6: false,
      checked7: false,
      checked8: false,
      checked9: false,
      checked10: false,
      options1: [{
        value: '选项1',
        label: '全市'
      }],
      options1: [{
        value: '选项1',
        label: '大于等于'
      }],
      value: "选项1",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
    }
  },
  methods: {
    handleChange(value) {
      console.log(value);
    }
  }
}
</script>
<style scoped lang="less">
.condition_list {
  width: 100%;
  height: 100%;
  font-size: 12px;
  padding-right: 10px;
  box-sizing: border-box;
}

.condition_list .query {
  width: 100%;
  border: 1px solid;
  padding: 10px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;

  .time1,
  .time2,
  .station,
  .type,
  .number {
    width: 230px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .check {
    width: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .buttons {
    width: 270px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-button {
      width: 130px;
      margin: 10px 0 0;
    }
  }
}

.condition_list .btn {
  width: 100%;
  border: 1px solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  .el-button {
    width: 130px;
    margin-top: 10px;
  }
}

.condition_list .tab {
  width: 100%;
  margin-top: 5px;

  .el-tabs {
    width: 100%;

    /deep/ .el-tabs__header {
      margin: 0;
    }

    /deep/ .el-tabs__content {
      width: 100%;
      border: 1px solid;
      height: 210px;

      .el-tab-pane {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 20px;
        box-sizing: border-box;

        .grade,
        .number,
        .point {
          width: 230px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 10px 0 0;
        }

        .color {
          width: 230px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;

          .color_box {
            width: 180px;
            height: 40px;
            background-color: red;
          }
        }

        .el-button {
          margin: 10px 0;
        }

        .checks {
          display: flex;
          width: 300px;
          justify-content: space-between;
        }
      }

    }
  }

}

.condition_list .button {
  width: 100%;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
  box-sizing: border-box;
  .one{
    width: 300px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .el-button{
      margin-bottom: 10px;
    }
  }
  .two{
    width: 300px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .three{
    width: 300px;
    display: flex;
    justify-content: space-between;
    .el-button{
      width: 120px;
    }
  }
}</style>